<template>
    <div>
        <div class="searchArea">
            <el-input v-model="ttc" placeholder="租户号" class="searchTextInput" clearable/>
            <el-input v-model="admin" placeholder="管理员" class="searchTextInput" clearable/>
            <el-button type="primary" class="searchButton" @click="searchTenantInfo">查询</el-button>
        </div>
        <div class="oeprations">
            <el-button type="primary" class="operationButton" @click="isShowAddBalanceDialog = true" plain>增加余额</el-button>
            <el-button type="primary" class="operationButton" @click="isShowAddGifteDialog=true" plain>赠送金额</el-button>
            <el-button type="primary" class="operationButton" @click="isShowAddRPAPointsDialog=true" plain>赠送点数</el-button>
        </div>
        <div class="table">
            <el-table 
            :data="tableData" 
            style="width: 100%" 
            max-height="500"
            stripe 
            border 
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{textAlign:'center'}"
            >
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="ttc" label="租户号" width="88" />
                <el-table-column prop="admin" label="管理员" width="88"/>
                <el-table-column prop="balance" label="余额" width="88"/>
                <el-table-column prop="gift" label="赠送额度" width="88"/>
                <el-table-column prop="plan" label="套餐计划" width="88"/>
                <el-table-column prop="planStartTime" label="套餐时间" width="98"/>
                <el-table-column prop="rpapoints" label="RPA点数" width="88"/>
                <el-table-column prop="envLimit" label="环境额度" width="88"/>
                <el-table-column prop="userLimit" label="用户额度" width="88"/>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClickEdit(scope.row)"
                        >编辑</el-button>
                        <el-button link type="primary" size="small" @click="handleClickDel(scope.row)" style="margin-left:0px;"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200, 250, 300]"
                :small="false"
                :disabled="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                total-text="总共"
                style="justify-content:end"
            />
        </div>
        <ModifyTenantInfoDialog v-model:isShow="isShowModifyTenantInfoDialog" :handleUpdated="handleUpdateTenantInfo"></ModifyTenantInfoDialog>
        <AddBalanceDialog v-model:isShow="isShowAddBalanceDialog" :handleUpdated="handleUpdateTenantInfo"></AddBalanceDialog>
        <AddGiftDialog v-model:isShow="isShowAddGifteDialog" :handleUpdated="handleUpdateTenantInfo"></AddGiftDialog>
        <AddRPAPoints v-model:isShow="isShowAddRPAPointsDialog" :handleUpdated="handleUpdateTenantInfo"></AddRPAPoints>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed,watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import SuperAdminApi from '../../apis/superadmin';
import ModifyTenantInfoDialog from './ModifyTenantInfoDialog.vue';
import AddBalanceDialog from './AddBalanceDialog.vue'
import AddGiftDialog from './AddGiftDialog.vue'
import AddRPAPoints from './AddRPAPoints.vue'

import { ElMessage, ElMessageBox } from 'element-plus'

var tableData:any = ref([])
const currentPage = ref(0)
const pageSize = ref(10)
const total = ref(200)
const ttc = ref("")
const admin = ref("")
const isShowModifyTenantInfoDialog = ref(false);
const isShowAddBalanceDialog = ref(false);
const isShowAddGifteDialog = ref(false);
const isShowAddRPAPointsDialog = ref(false);

const router = useRouter();
const route = useRoute();

console.log('[TenantList]Route', route.path);

watch(()=> route.path,() => {
    if(route.path.startsWith('/superAdminTenantMgr/modifyTenantInfo/')){
        isShowModifyTenantInfoDialog.value = true;
    }else{
        isShowModifyTenantInfoDialog.value = false;
    }
},{
    immediate: true
});


const loadData = ()=>{
    SuperAdminApi.fetchTenantList(currentPage.value, pageSize.value).then(ret=>{
        console.log('[TenantList]', ret);
        tableData.value = ret.data.list;
        total.value = ret.data.totalCount;
        currentPage.value = ret.data.page;
        pageSize.value = ret.data.pageSize;
    }).catch(err=>{
        console.log('[TenantList]', err);
    })
}
onMounted(()=>{
    console.log('[TenantList] onMounted');
    loadData();
})

const searchTenantInfo = ()=>{
    SuperAdminApi.searchTenantInfo(ttc.value, admin.value).then(ret=>{
        console.log('[TenantList]', ret);
        tableData.value = ret.data.list;
        total.value = ret.data.totalCount;
        currentPage.value = ret.data.page;
        pageSize.value = ret.data.pageSize;
    }).catch(err=>{
        console.log('[TenantList]', err);
    })
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  loadData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val-1;
  loadData();
}

const handleClickEdit = (row:any)=>{
    console.log('编辑', row);
    router.push('/superAdminTenantMgr/modifyTenantInfo/'+row.id);
}

const handleClickDel = (row:any) => {
    console.log('删除', row);
    // 二次确认
    ElMessageBox.confirm(`确认删除租户${row.ttc}吗?`,'温馨提示',
        {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(() => {
        let id = row.id;
        return SuperAdminApi.delTenant(id);
    }).then(ret=>{
        loadData();
        ElMessage({
            type: 'success',
            message: "删除成功",
        })
    }).catch((err) => {
        if(err=="cancel"){
            ElMessage({
                type: 'info',
                message: "取消删除操作",
            })
        }else{
            ElMessage({
                type: 'error',
                message: "删除失败",
            })
        }
    })

}

const  handleUpdateTenantInfo = () =>{
    loadData();
}

</script>

<style scoped>
.pagination {
    margin-top: 15px;
}
.searchArea, .oeprations {
    padding-bottom: 10px;
}
.searchButton {
    margin-left: 0px;
}
.searchTextInput {
    width: 120px;
    margin-right: 10px;
}
.operationButton {
    margin-right: 0px;
}
</style>
